<template>
  <div class="job-guaid-container">
    <floter-header :icon="floterData.icons" :title="floterData.title" ref="mySwiper"></floter-header>
    <div class="get_job_focus">
      
      <!-- Swiper -->
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in jobGuaidDatas" :key="index">
          <a href="javascript:;"><img :src="item.image" alt="" /></a>
          <p>{{item.title}}</p>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      
      <div class="swiper-button-next" @click="next"></div>
      <div class="swiper-button-prev" @click="prev"></div> 
    </div>
  </div>
</template>

<script>

import FloterHeader from './home-floter-header'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  data(){
    return {
      jobGuaidDatas:[{
          image:require('@/assets/images/pic.png'),
          title:'老师教你应对面试技巧',
        }, {
          image:require('@/assets/images/ldh.jpg'),
          title:'老师教你应对面试技巧',
        }, {
          image:require('@/assets/images/3.jpg'),
          title:'老师教你应对面试技巧',
        }
      ],
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
    }
  },
  props:['floterData'],
  computed: {
    swiper() {
        return this.$refs.mySwiper.$swiper
      }
  },
  mounted(){
    this.swiper.slideTo(2, 1000, false)
  },
  methods:{
    prev(){
      this.swiper.slidePrev(1000, false)
    },
    next(){
      this.swiper.slideNext(1000, false)
    }
  },
  components:{
    FloterHeader,
    Swiper,
    SwiperSlide
  }
  
}
</script>

<style lang="less" scoped>

.job-guaid-container{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  background-color: #fff;
  overflow: hidden;

  .get_job_focus {
    position: relative;
    margin: 15px 0;

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      transition: 300ms;
      transform: scale(0.8);
      opacity: 0.4;

      flex-direction: column;

      a {
        width: 240px;
        height: 278px;
        border-radius: 8px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      p {
        width: 240px;
        font-size: 14px;
        margin-top: 20px;
        color: #666;
      }
    }
    .swiper-slide-active,
    .swiper-slide-duplicate-active{
      transform: scale(1);
      z-index: 999;
      opacity: 1;
    }

    .swiper-button-next,
    .swiper-button-prev {
      outline: none;
      &:after {
        font-size: 28px;
        color: #333;
      }
    }
  }

}

</style>